<template>
    <CommonPage :state="state" :flowId="infoData.flowId" @submitForm="submitForm">
        <div class="app-container">
            <LitigationApplicationLitigation />
            <LitigationApplicationOrder />
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>申请信息</span>
                    <span></span>
                </div>
                <el-descriptions title="" :column=2>
                    <el-descriptions-item label="变更诉讼原因">
                        {{ info.rentedUnitNum|filterNull }}
                    </el-descriptions-item>
                    <el-descriptions-item label="修改前累计未结清费用">
                        {{ info.rentedUnitNum|filterNull }}
                    </el-descriptions-item>
                    <el-descriptions-item label="附件上传" >
                        <div class="flex">
                            <ImageCommon disabled v-model="info.carBasicVo" :up-type="2" info="选择附件" :limit="20"></ImageCommon>
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
                <!-- 合同期内已生成账单未结清费用--修改 -->
                <div class="card-wrap flex-column justify-end card-padding">
                        <div class="card-title-wrap">
                            <span>合同期内已生成账单未结清费用--修改</span>
                            <span></span>   
                        </div>
                        <div v-for="(item,index) in billFessList" :key="item.id">
                            <div class="title_box">
                                <div>
                                    <span class="title_text">车牌号:{{  }}</span>    
                                </div>
                            </div>
                            <el-table fit :data="item.definitionList" border style="margin-top:10px;margin-bottom: 10px;" >
                                <el-table-column prop="dateTime" label="期数"  align="center" ></el-table-column>
                                <el-table-column prop="payeeType" label="费用类型"  align="center" > </el-table-column>
                                <el-table-column prop="customName" label="修改前费用(元)" align="center"></el-table-column>
                                <el-table-column prop="carNo" label="修改后费用(元)" align="center">
                                    <template v-slot="{row}">
                                        <el-input v-model="row.payeeType"></el-input>
                                    </template>
                                </el-table-column> 
                                
                            </el-table>
                    </div>
                    
                </div>
                <!-- 合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改 -->
                <div class="card-wrap flex-column justify-end card-padding">
                    <div class="card-title-wrap">
                        <span>合同期内已生成账单未结清费用--修改</span>
                        <span></span>   
                    </div>
                    <div v-for="(item,index) in newFessList" :key="item.id">
                        <div class="title_box">
                            <div>
                                <span class="title_text">车牌号:{{  }}</span>
                            </div>
                        </div>
                        <el-table fit :data="item.definitionList" border style="margin-top:10px;margin-bottom: 10px;" >
                            <el-table-column prop="payeeType" label="费用类型"  align="center" > </el-table-column>
                            <el-table-column prop="customName" label="修改前费用(元)" align="center"></el-table-column>
                            <el-table-column prop="carNo" label="修改后费用(元)" align="center">
                                <template v-slot="{row}">
                                    <el-input v-model="row.payeeType"></el-input>
                                </template>
                            </el-table-column> 
                        </el-table>
                    
                    </div>
                    
                </div>
                <!-- 合同期内或合同期外未还车发生诉讼产生的未结清费用--新费用项 -->
                <div class="card-wrap flex-column justify-end card-padding">
                    <div class="card-title-wrap">
                        <span>合同期内已生成账单未结清费用--修改</span>
                        <span></span>   
                    </div>
                    <div v-for="(item,index) in billFessList" :key="item.id">
                        <div class="title_box">
                            <div>
                                <span class="title_text">车牌号:{{  }}</span>
                            </div>
                        </div>
                        <el-table fit :data="item.definitionList" border style="margin-top:10px;margin-bottom: 10px;" >
                            <el-table-column prop="carNo" label="费用项类型" align="center"></el-table-column> 
                            <el-table-column prop="carNo" label="费用金额(元)" align="center">
                                <template v-slot="{row}">
                                    <el-input v-model="row.payeeType"></el-input>
                                </template>
                            </el-table-column> 
                        </el-table>
                    
                    </div>
                    
                </div>
                <!-- 其他未结清费用-现费用项修改 -->
                <div class="card-wrap flex-column justify-end card-padding">
                    <div class="card-title-wrap">
                        <span>其他未结清费用-现费用项修改</span>
                        <span></span>
                    </div>
                        <el-table fit :data="definitionList1" border style="margin-top:10px;margin-bottom: 10px;" >
                            <el-table-column prop="payeeType" label="费用类型"  align="center" ></el-table-column>
                            <el-table-column prop="customName" label="修改前费用(元)" align="center"></el-table-column>
                            <el-table-column prop="carNo" label="修改后费用(元)" align="center">
                                <template v-slot="{row}">
                                    <el-input v-model="row.payeeType"></el-input>
                                </template>
                            </el-table-column> 
                        </el-table>
                </div>
                <!-- 其他未结清费用-新费用项 -->
                <div class="card-wrap flex-column justify-end card-padding">
                    <div class="card-title-wrap">
                        <span>其他未结清费用-新费用项</span>
                        <span></span>
                    </div>
                    <el-table fit :data="definitionList4" border style="margin-top:10px;margin-bottom: 10px;" >
                        <el-table-column prop="payeeType" label="费用类型"  align="center" ></el-table-column>
                        <el-table-column prop="customName" label="费用金额(元)" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.customName"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="carNo" label="附件" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.carNo"></el-input>
                            </template>
                        </el-table-column> 
                    </el-table>
                </div>
            </div>
        </div>
    </CommonPage>
   
</template>

<script>

import LitigationApplicationOrder from '@/views/collectionManagement/litigationApplication/compoent/order.vue'
import LitigationApplicationLitigation from '@/views/collectionManagement/litigationApplication/compoent/litigation.vue'

export default {
    name: "IitigationInfo",
    components: {LitigationApplicationOrder,LitigationApplicationLitigation},
    dicts: [ 'progress_litigation'],
    data() {
        return {
            status:1,
            form:{
                carBasicVo:'1779677725229084674'
            },
            billFessList:[
                    {
                        carVonList:[
                            {
                                value: 1,
                                label: '京A999'
                                }, {
                                value: 2,
                                label: '京A888'
                            },
                        ],
                        definitionList:[
                            {
                                payeeType:1, customName:20,carNo:2,id:new Date().getTime(),
                                dateTime:[1,2,3,4,5,6]
                            }
                        ],
                        id:new Date().getTime()

                    }
                ],
            newFessList:[
             {
                        carVonList:[
                            {
                                value: 1,
                                label: '京A999'
                                }, {
                                value: 2,
                                label: '京A888'
                            },
                        ],
                        definitionList:[
                            {
                                payeeType:1, customName:20,carNo:2,id:new Date().getTime(),
                                dateTime:[1,2,3,4,5,6]
                            }
                        ],
                        id:new Date().getTime()

                    }
            ],
            info:{
                order:{

                },
                litigation:{

                }
            },
            definitionList1:[
                {
                    payeeType:1, customName:20,carNo:2,id:new Date().getTime()
                }
            ],
            definitionList4:[
                {
                    payeeType:1, customName:20,carNo:2,id:new Date().getTime()
                }
            ],
            infoData:{
                flowId:'2435291',
            },
            state:'write',
        };
    },
    async created(){
       
    },
    methods: {
        submitForm(){

        },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 10px;
    width: 70%;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

::v-deep .el-descriptions__header {
    margin-top: -8px !important;
    margin-bottom: 10px !important;
}
</style>
